<template>
  <div class="sousuo">
      <div class="inputsbox">
           <div class="city">
               <span @click="dianji" >地区</span>
               <span :class="citys==0?'el-icon-caret-bottom':'el-icon-caret-top'"></span>
           </div>
            <input type="text" placeholder="输入关键词查询">
            <span class="sousuos">搜索</span>
    </div>
  </div>
</template>

<script>
import { mapState,mapMutations} from 'vuex'
export default {
    data(){
        return{

        }
    },
    methods:{
     ...mapMutations(['fn2']),
        dianji(){
            this.fn2()            
        },
        uls(event){

        },
    },
     computed:{
        ...mapState(["citys"])
    },
}
</script>

<style scoped>
.sousuo{
    height: 1.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.inputsbox{
    font-size: .3rem;
    height :.8rem;
    background-color: #fff;
    border: .01rem solid #ba050e;
    border-radius: .4rem;
    padding: .1rem .1rem .1rem .3rem;
}
.city{
    float: left;
    height: 100%;
    width: 1.4rem;
    font-size: .3rem;
    color: black;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
}
.city>span{
   margin-right:.2rem;
}
.inputsbox>input{
        float: left;
        width:50%;
        height: 100%;
        padding-left: .1rem;
        font-size: .30rem;
        height:100%;
        outline: 0;
        border: 0
}
.sousuos{
    float: left;
    display: block;
    width: 1rem;
    font-size: .26rem;
    height: .6rem;
    border-radius: .3rem;
    color: white;
    float: right;
    line-height: .6rem;
    text-align: center;
    background-color: #ba050e;
}
</style>